<template>
	<div id="goods_container">
		<ul class="goods">
			<li class="content" v-for="item in goodsLists" style="list-style: none;">
				<div class="divbigImg">
					<div class="bigImgSize" target="_blank" @click="imgToEquipmentsDetails(item.goodsImgUrl)">
						<img class="bigImg" :src="require('@/assets/equipments/'+item.goodsImgUrl)" title="折叠式太阳能板"
							alt="折叠式太阳能板">
					</div>
				</div>
				<div class="divgoodImgLists">
					<el-carousel :interval="4000" :autoplay="false" type="card"
						style="width: 304px;background-color: #c5ffc2;" indicator-position="none" arrow="nerver"
						height="62px">
						<el-carousel-item style="width: 50px;height: 50px;margin-left: 50px;margin-top: 5px;">
							<img class="goodImg" :src="require('@/assets/equipments/'+item.goodsImgUrl)">
						</el-carousel-item>
					</el-carousel>
				</div>
				<div class="brief">
					<span class="goods_name" @click="toEquipmentsDetails">{{item.goodsName}}</span>
					<span class="goods_desc">{{item.goodsDescription}}</span>
					<span class="goods_price">￥ {{item.goodsPrice}}</span>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	import request from '../../utils/axios/request'
	export default {
		data() {
			return {
				goodsLists: [{
					goodsId: '',
					goodsName: '',
					goodsPrice: '',
					goodsDescription: '',
					goodsImgUrl: '',
					goodImgLists: [{
						url: ''
					}]
				}, ]
			}
		},
		methods:{
			imgToEquipmentsDetails(e) {
				console.log(e)
				// this.$cookies.set("imgSearch", e)
				let imgSearch = e
				// console.log(document.cookie)
				this.$router.push({
					path: 'equipmentDetails',
					query: {
						imgSearch: imgSearch
					}
				})
			},
			toEquipmentsDetails(e) {
				let clickSearch = e.target.innerHTML
				// console.log(e.target.innerHTML)
				// this.$cookies.set("clickSearch", e.target.innerHTML)
				// console.log(document.cookie)
				this.$router.push({
					path: 'equipmentDetails',
					query: {
						clickSearch: clickSearch
					}
				})
			
			},
		},
		created() {
			
			let serarchInput = this.$cookies.get("serarchInput")
			// console.log(serarchInput)
			request({
				method: 'get',
				url: '/equipments/index/' + serarchInput,
			}).then((res) => {
				console.log(res)
				var jsonObj = JSON.parse(JSON.stringify(res.data.data));
				for (var i = 0; i < jsonObj.length; i++) {
					jsonObj[i].goodsName = jsonObj[i].eName;
					jsonObj[i].goodsDescription = jsonObj[i].eDescription;
					jsonObj[i].goodsPrice = jsonObj[i].ePrice;
					jsonObj[i].goodsImgUrl = jsonObj[i].imageUrl;
				}
				this.goodsLists = jsonObj

			})
		}
	}
</script>

<style>
	.goods_price {
		background-color: transparent;
		height: 30px;
		font-size: 28px;
		color: #ff0000;

	}

	.goods_desc {
		width: 300px;
		height: 20px;
		text-align: center;
		color: #393939;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-bottom: 3px;
	}

	.goods_name {
		height: 28px;
		font-size: 18px;
		margin-bottom: 3px;

	}

	.brief {
		background-color: transparent;
		all: initial;
		height: 93px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.divbigImg {
		background-color: transparent;
		width: 304px;
		height: 265px;
	}

	.bigImg {

		width: 230px;
		height: auto;
		/* background-color: #b1b1b1; */
		margin-top: 40px;
	}



	#goods_container {
		background-color: transparent;
		width: 1300px;
		height: auto;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		margin: 0 auto;
	}

	.goods {

		padding-left: 12px;
	}

	.goods ul {

		width: 1500px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.goods li {
		background-color: #ffffff;
		width: 304px;
		height: 420px;
		margin: 8px 8px 8px 8px;
		float: left;

	}

	.divgoodImgLists {
		background-color: #00ffff;
		width: 304px;
		height: 62px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

	}

	.divgoodImgLists ul {
		list-style: none;
		height: 50px;
		width: 10px;
		margin: 0 auto;
	}



	.goodImgLists li {
		all: initial;
		width: 50px;
		height: 50px;
		margin-right: 40px;
		/* 	margin-right: 10px; */
	}

	.el-radio {
		background-color: #ffffff;
		margin-top: 20px;

	}

	.el-carousel__item {
		all: initial;
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.goodImg {
		width: 100%;
		height: 100%;
		/* background-color: #5500ff; */
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}

	.el-carousel__arrow {
		display: none;
	}
</style>